import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'))
class Counter extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }
    handleClick = (event) => {
        console.log(event)
        console.log(event.nativeEvent);
        console.log('click button')
        event.stopPropagation();///阻止事件继续向上冒泡，或者说阻止事件继续传播
        //this.setState({ count: ++this.state.count });
    }
    handleDivClick= ()=>{
        //在编写事件处理函数的时候，为了保证this一定指向当前类组件实例，一定使用箭头函数
        //当函数创建的时候this就已经绑死为类组件的实例，以后不管你怎么调用，this都会指向类组件的实例
        console.log('click div')
    }
    goto=(event)=>{
        //阻止默认事件，因为a标签默认点击会跳转到href地址
        event.preventDefault();//在React内部会根据浏览器的差异采用不同的实现方式
    }
    render() {
        return (
            <div onClick={this.handleDivClick}>
                <p>{this.state.count}</p>
                <button onClick={this.handleClick}>+</button>
                <a href="http://www.baidu.com" onClick={this.goto}>百度</a>
            </div>
        )
    }
}
let element = <Counter />
root.render(element);
